Tooltip হলো Highcharts এর একটি গুরুত্বপূর্ণ ফিচার যা চার্টের বিভিন্ন ডেটা পয়েন্টে মাউস পয়েন্টার রাখলে ঐ পয়েন্ট সম্পর্কে তথ্য প্রদর্শন করে। Tooltip ব্যবহারকারীর জন্য ডেটাকে আরও পাঠযোগ্য এবং স্পষ্ট করে তোলে। Highcharts এ tooltip কাস্টমাইজেশন বিভিন্ন উপায়ে করা যায়, যেমন টুলটিপের ফরম্যাট, পজিশন, এবং স্টাইল কাস্টমাইজ করা।
Tooltip এর জন্য Basic Configurations
Highcharts এ tooltip কনফিগারেশন সাধারণত tooltip অপশন দ্বারা করা হয়। নিচে tooltip এর কিছু সাধারণ কনফিগারেশন অপশন এবং তাদের ব্যাখ্যা দেওয়া হলো।
1. Default Tooltip
Highcharts এ ডিফল্টভাবে tooltip একটি বেসিক ডেটা পয়েন্টের মান প্রদর্শন করে, যেমন সিরিজের নাম এবং মান।
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Over Time'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Product A',
data: [5, 10, 15, 20, 25]
}],
tooltip: {
shared: true // ডিফল্ট টুলটিপ সবার জন্য
}
});
এখানে, shared: true অপশনটি ব্যবহার করা হয়েছে, যার মাধ্যমে যদি একাধিক সিরিজ থাকে, তবে একযোগভাবে টুলটিপ প্রদর্শিত হবে।
2. Tooltip Format
Highcharts এ tooltip কাস্টমাইজ করা যায় formatter ফাংশন ব্যবহার করে। এতে আপনি টুলটিপে যে তথ্য প্রদর্শন করবেন তা নির্ধারণ করতে পারবেন।
tooltip: {
formatter: function () {
return 'মাস: ' + this.x + '<br>' +
'বিক্রয়: ' + this.y;
}
}
এখানে, this.x হল X-অক্ষের মান এবং this.y হল Y-অক্ষের মান, যা টুলটিপে প্রদর্শিত হবে। আপনি এই ফরম্যাটে আপনার কাস্টম তথ্যও যোগ করতে পারেন।
3. Tooltip Style Customization
আপনি tooltip এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন ফন্ট, ব্যাকগ্রাউন্ড কালার, এবং বর্ডার ইত্যাদি।
tooltip: {
backgroundColor: '#FCFFC5', // টুলটিপের ব্যাকগ্রাউন্ড কালার
borderColor: '#FF0000', // টুলটিপের বর্ডার কালার
borderRadius: 10, // টুলটিপের কোণার রেডিয়াস
borderWidth: 2, // টুলটিপের বর্ডার প্রস্থ
style: {
color: '#000', // টুলটিপের লেখার রঙ
fontSize: '16px', // টুলটিপের ফন্ট সাইজ
fontFamily: 'Arial, sans-serif' // টুলটিপের ফন্ট ফ্যামিলি
}
}
এখানে, backgroundColor, borderColor, এবং style এর মাধ্যমে টুলটিপের ভিজুয়াল স্টাইল কাস্টমাইজ করা হয়েছে।
4. Value Prefix and Suffix
আপনি টুলটিপে মানের আগে এবং পরে কোন প্রিফিক্স (prefix) এবং সাফিক্স (suffix) যোগ করতে পারেন।
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ইউনিট'
}
এখানে, {series.name} সিরিজের নাম এবং {point.y} হল ডেটা পয়েন্টের মান। এর মাধ্যমে টুলটিপে আরো বিস্তারিত তথ্য প্রদর্শিত হবে।
5. Positioning the Tooltip
Highcharts এ tooltip এর পজিশন কাস্টমাইজ করা যায়। আপনি tooltip কে নির্দিষ্ট কোঅর্ডিনেট বা এক্স এবং ওয়াই অক্ষের উপর ভিত্তি করে পজিশন দিতে পারেন।
tooltip: {
positioner: function (width, height, point) {
return {
x: point.plotX + 10, // X পজিশন
y: point.plotY - 30 // Y পজিশন
};
}
}
এখানে, positioner ফাংশন ব্যবহার করে tooltip এর পজিশন কাস্টমাইজ করা হয়েছে, যেখানে point.plotX এবং point.plotY পয়েন্টের অবস্থান অনুযায়ী টুলটিপের অবস্থান নির্ধারণ করা হয়।
6. Crosshairs in Tooltip
আপনি tooltip এর সাথে crosshair যোগ করতে পারেন, যা ব্যবহারকারীকে ডেটা পয়েন্টের উপর টুলটিপের মাধ্যমে নির্দেশনা দেয়।
tooltip: {
crosshairs: true // ক্রসহেয়ার ব্যবহার করা হচ্ছে
}
এটি X এবং Y অক্ষের উপর ক্রস লাইন প্রদর্শন করবে, যা টুলটিপের সাহায্যে ডেটার অবস্থান স্পষ্ট করে তুলবে।
উপসংহার
Highcharts এ Tooltip কাস্টমাইজেশন চার্টের ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করতে সাহায্য করে। আপনি tooltip এর ফরম্যাট, স্টাইল, পজিশনিং, ক্রসহেয়ার, এবং value prefix/suffix কাস্টমাইজ করে আপনার চার্টকে আরও তথ্যপূর্ণ এবং আকর্ষণীয় করে তুলতে পারেন। Highcharts এর শক্তিশালী tooltip কাস্টমাইজেশন অপশনগুলি আপনাকে আপনার ডেটা ভিজুয়ালাইজেশনকে আরও প্রফেশনাল এবং পাঠযোগ্য করতে সাহায্য করবে।
Read more
